<!-- 首页 -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import laboratory from '../laboratory/index.vue'
import img_1 from '../../../../static/img/index/carousel_main/1.jpg'
import img_2 from '../../../../static/img/index/carousel_main/2.jpg'
import img_3 from '../../../../static/img/index/carousel_main/3.jpg'
import img1 from "../../../../static/img/index/jiaoshou/js1.png"
import img2 from "../../../../static/img/index/jiaoshou/js2.png"
import img4 from "../../../../static/img/index/jiaoshou/js4.png"
import logo from '../../../../static/img/logo.jpg'
import img6 from "../../../../static/img/index/jiaoshou/js6.png"
import img7 from "../../../../static/img/index/jiaoshou/js7.png"
import img_introduce from '../../../../static/img/index/introduce.jpg'
import test from '../../../../static/img/index/test.jpg'
import test2 from '../../../../static/img/index/test2.jpg'
import img_middle from '../../../../static/img/index/middle.jpg'
import icon1 from '../../../../static/img/index/icon1.jpg'
import icon2 from '../../../../static/img/index/icon2.jpg'
import icon3 from '../../../../static/img/index/icon3.jpg'
// import img_title from '../../../../static/img/index/title.jpg'
import img_footer from '../../../../static/img/index/footer.jpg'
import img_stu from '../../../../static/img/index/studentIcon.jpg'
import img_tea from '../../../../static/img/index/teacherIcon.jpg'
import img_sch from '../../../../static/img/index/schoolIcon.jpg'
import img_edu from '../../../../static/img/index/eduIcon.jpg'



import flag from '../../../hooks/changePhoneFlag'

const router = useRouter()
const imgList = [img_1, img_2, img_3]
const phoneflag = flag(1200)
const loading = ref<boolean>(false)
const loginflag = ref<boolean>(false)

const linkTo = () => {
    router.push({ name: "login" })
}
onMounted(() => {

})

const list = [
    { name: "聂衍刚(教授)", content: "专家智库", time: "2021-05-04", imgUrl: img2 },
    { name: "窦凯(副教授)", content: "专家智库", time: "2021-07-10", imgUrl: img1 },
    { name: "王孟成(教授)", content: "专家智库", time: "2021-10-04", imgUrl: img4 },
    { name: "杨文登(教授)", content: "专家智库", time: "2021-10-04", imgUrl: img6 },
    { name: "喻承甫(副教授)", content: "专家智库", time: "2021-10-04", imgUrl: img7 }
]

const activeIndex = ref<number>(0)
const selectStyle = (item: number) => {
    activeIndex.value = item

}

</script>

<template>
    <div class="body">
        <div class="page">
            <div class="swiper-container">
                <!-- <div class="text1">广州大学·学生心理健康与发展智慧服务平台</div> -->
                <!-- <div class="text2">“一个智慧心理测评系统”</div> -->
                <div>
                    <el-carousel :height="phoneflag ? '200px' : '600px'" class="block">
                        <el-carousel-item v-for="item in imgList" :key="item">
                            <img v-lazyload="item" />
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="card-box">
            <el-card shadow="hover" :class="phoneflag ? 'phonecard' : 'card'">
                <img v-lazyload="img_stu" alt="" />
                <div class="name">学生</div>
                <el-button disabled style="color:rgb(140,140,140);border:1px solid rgb(140,140,140)">暂未开放</el-button>
                <p>学生通过心理测评了解自身发展特点和潜能，通过学校心理健康教育和个性化发展指导，提升心理健康水平，促进学生全面发展。</p>
            </el-card>
            <el-card shadow="hover" :class="phoneflag ? 'phonecard' : 'card'">
                <img v-lazyload="img_tea" alt="" />
                <div class="name">教师</div>
                <el-button disabled style="color:rgb(140,140,140);border:1px solid rgb(140,140,140)">暂未开放</el-button>
                <p>教师通过在线平台获取线上教学课程资源并针对教学问题和心理困扰向专家咨询，以促进教师心理健康发展和个人成长。</p>
            </el-card>
            <el-card shadow="hover" :class="phoneflag ? 'phonecard' : 'card'">
                <img v-lazyload="img_sch" alt="" />
                <div class="name">学校</div>
                <el-button disabled style="color:rgb(140,140,140);border:1px solid rgb(140,140,140)">暂未开放</el-button>
                <p>学校定期了解师生心理健康状况，根据师生的心理健康发展需求及时制定的心理健康促进教育方案，针对性地开展学校心理健康教育，完善学校心理健康教育服务。</p>
            </el-card>
            <el-card shadow="hover" :class="phoneflag ? 'phonecard' : 'card'">
                <img v-lazyload="img_edu" alt="" />
                <div class="name">教育主管部门</div>
                <el-button @click="linkTo">点击进入测评</el-button>
                <p>教育部门整体了解区域学生心理健康状况和学校心理健康教育工作现状，针对各区域需求提供精准社会支持和投入，完善区域心理健康教育服务体系，促进区域心理健康发展。</p>
            </el-card>

        </div>
        <div class="middle">
            <img v-lazyload="img_middle" alt="">
        </div>



        <div class='introduce'>

            <div class="main">
                <div class="aside">
                    <div>
                        <div>
                            <img v-lazyload="icon1" alt="" class="icon" />
                            心理健康测评
                        </div>
                        <p>心理健康测评是做好学生心理健康教育工作的前提和重要环节。儿童青少年时期是个体成长发展过程中容易产生各类心理行为问题的关键期。为学生提供高效、快捷的心理健康测试平台，有助于教育工作者高效管理学生心理健康档案，学生及时了解自身心理健康状况并记录自身心理成长变化。
                        </p>

                        <a href="javascript:void(0);">了解更多</a>
                    </div>

                </div>

                <img v-lazyload="img_introduce" alt="图片">
                <div class="aside">
                    <div>
                        <div> <img v-lazyload="icon2" alt="" class="icon" />心理健康干预咨询</div>
                        <p>对学生心理健康进行预防与干预，是学校开展心理健康工作的重要内容，也是开展有效心理服务的前提。心理辅导预约系统整合家庭、学校、社区、医疗等机构的资源，学生在学校的培训指导下，正确使用心理辅导预约系统，实现方便安全即时的线上心理健康指导。
                        </p>
                        <a href="javascript:void(0);">了解更多</a>
                    </div>
                    <div>
                        <div> <img v-lazyload="icon3" alt="" class="icon" />心理健康诊断</div>
                        <p>对学生在学习、生活、人际互动中出现的问题进行原因排查和分析，识别心理健康问题，及时给予指导与干预，从而提升学生心理素质的全面发展。</p>
                        <a href="javascript:void(0);">了解更多</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="title">
            <img v-lazyload="test" alt="">
        </div>
        <div class="title2">
            <img v-lazyload="test2" alt="">
        </div>
        <!-- <laboratory></laboratory> -->
        <div class="expert-team">
            <div>
                <div class="title">专家团队</div>
                <div class="sec-title">国内知名心理专家团队</div>
                <div style="width:80%;margin:auto">
                    <el-carousel :interval="4000" type="card" height="300px" @change="selectStyle">
                        <el-carousel-item v-for="(item, index) in list" :key="item.name">
                            <div class="card" @click="selectStyle(index)">
                                <div class="img"><img v-lazyload="item.imgUrl" alt="" /></div>
                                <div class="name">{{ item.name }}</div>
                                <el-button type="success" v-show="activeIndex === index" disabled class="more">了解更多
                                </el-button>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="foot">
            <img v-lazyload="img_footer" alt="">
            <div class="box">
                <div class="title">
                    <img v-lazyload="logo" alt="">
                    平台概况
                </div>
                <div class="content">
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;广州大学“青心”智慧服务平台（简称“平台”）以“关爱心理健康、促进学生发展“为理念，致力于搭建学生心理健康
                        “测评-诊断-干预咨询”智慧服务平台。</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;平台建设以广州大学“十四五”事业发展规划为思想引领，依托大数据认知科学与智慧教育交叉创新平台“学生发展与心理健康”项目组运作，运营团队由心理学、教育学、脑科学和计算机科学等交叉领域学科30余位专家（其中教授6人，副教授10人）组成。</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;平台借助互联网、大数据科学、人工智能等技术，实现了心理测评、诊断、干预咨询一站式服务需求，不仅为维护心理健康、促进学生发展提供重要支撑，也可为大中小学校提供专业、全面、科学的心理服务解决方案。</span>
                </div>
            </div>
            <div class="sec-box">
                <div class="left-box">
                    <div>联系我们</div>
                    <div>联系电话</div>
                    <div>020-39366147</div>
                    <div>平台地址</div>
                    <div>广东省广州市番禺区大学城外环西路230号</div>
                </div>
                <div class="right-box">
                    <div>广大青心</div>
                    <div>学生心理健康智慧服务平台</div>
                </div>
            </div>

        </div>


    </div>

</template>

<style lang="scss" scoped>
.body {
    position: absolute;
    position: relative;

}

.page {
    // position: relative;
    box-sizing: border-box;

    .swiper-container {

        width: 100%;
        // height: 00px;
        overflow: hidden;
        position: relative;

        .text1 {
            width: 800px;
            // color: white;
            border-radius: 10px;
            font-size: 40px;
            background-color: #fff;
            font-weight: 500;
            padding: 10px;
            position: absolute;
            top: 60%;
            left: 50%;
            margin-left: -350px;
            z-index: 99;
        }

        .text2 {
            width: 360px;
            // color: white;
            padding: 10px;
            font-size: 30px;
            font-weight: 500;
            position: absolute;
            background-color: #fff;
            z-index: 6 !important;
            top: 55%;
            left: 50%;
            margin-left: -180px;
        }

        img {
            width: 100%;
            // height: 800px;
            object-fit: cover;
        }
    }
}

.card-box {
    display: flex;
    width: 100%;
    // float:left;
    flex-wrap: wrap;
    position: relative;
    // position: absolute;
    // top: 500px;
    justify-content: center;
    margin-top: -50px;
    z-index: 99;

    >:nth-child(1) {
        border-right: 2px solid rgb(170, 170, 170);
    }

    >:nth-child(2),
    :nth-child(3) {
        border-left: 2px solid rgb(170, 170, 170);
        border-right: 2px solid rgb(170, 170, 170);
    }

    >:nth-child(4) {
        border-left: 2px solid rgb(170, 170, 170);
    }

    .phonecard {
        width: 45%;
        // heig
        box-shadow: 0 10px 6px -6px rgba(30, 30, 30, 0.1), 12px 0 8px -8px rgba(50, 50, 50, 0.1);

        img {
            width: 70px;
            margin-top: 20px;
        }

        .name {
            font-size: 24px;
            margin: 8px 0 15px 10px;
        }

        .el-button {
            border: rgb(92, 168, 253) solid 2px;
            padding: 10px;
            border-radius: 20px;
            color: rgb(92, 168, 253);
        }

        p {
            margin-top: 15px;
            font-size: 12px;
            color: rgb(183, 183, 183);
            line-height: 18px;
        }
    }

    .card {
        width: 260px;
        box-shadow: 0 10px 6px -6px rgba(30, 30, 30, 0.1), 12px 0 8px -8px rgba(50, 50, 50, 0.1);

        img {
            width: 70px;
            margin-top: 20px;
        }

        .name {
            font-size: 24px;
            margin: 8px 0 15px 10px;
        }

        .el-button {
            border: rgb(255, 154, 100) solid 2px;
            padding: 10px;
            border-radius: 20px;
            color: rgb(255, 154, 100);
        }

        p {
            margin-top: 15px;
            font-size: 12px;
            color: rgb(183, 183, 183);
            line-height: 18px;
        }
    }
}

.middle {
    width: 90%;
    margin: 0 auto;

    >img {
        width: 100%;
    }
}

.introduce {
    // margin-top: 310px;
    margin: 0 auto;
    width: 90%;

    .title {
        font-size: 40px;
        font-weight: 800;
        margin: 60px 0;
        text-align: center;
    }

    .main {

        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 500px;
            // height: 600px;
            display: flex;

        }

        .aside {
            >div {
                width: 370px;
                height: 300px;
                margin: 20px 0;

                >:nth-child(1) {

                    font-size: 26px;
                    display: flex;
                    align-items: center;

                    >.icon {
                        width: 70px;
                        height: 70px;
                        margin-left: -5px;
                    }
                }

                >p {
                    margin: 10px 0;
                    line-height: 24px;
                    font-size: 16px;
                }
            }
        }
    }
}

.title {
    >img {
        width: 100%
    }
}

.title2 {
    width: 90%;
    margin: 0 auto;

    >img {
        width: 100%
    }
}


.expert-team {
    // background-color: rgb(250, 250, 251);
    padding-top: 100px;

    .title {
        font-size: 34px;
        font-weight: 500;
        margin-bottom: 20px;
        text-align: center;
    }

    .sec-title {
        text-align: center;
        font-size: 24px;
        margin: 20px 0 50px 0;
    }

    .el-carousel__item {

        display: flex;
        // width:100%;
        justify-content: center;
        align-items: center;
    }

    .card {
        box-sizing: border-box;
        text-align: center;

        // display: flex;
        // flex-direction: column;
        >.name {
            margin: 20px;
            font-size: 24px;
            font-size: 28px;
            font-weight: 600;
            font-weight: bold;
            display: flex;
        }

        img:hover {
            transform: scale(1.05);
        }

        img {
            transition: all 0.6s;
            margin: auto;
            height: 200px;
        }

        .more {
            font-family: "Montserrat", sans-serif;
            font-size: 15px;
            font-weight: 400;
            // border: 1px solid rgb(20, 90, 192) !important;
            border-radius: 10px;
            line-height: 30px;
            width: 104px;
            height: 40px;
            margin-top: -15px;
            box-sizing: border-box;
        }

        .more:hover {
            color: #fff;
            background-color: #61a93e;
        }
    }


}

.foot {
    margin-top: 50px;
    position: relative;

    >.box {
        padding: 0 40px;
        box-sizing: border-box;
        position: absolute;
        width: 50%;
        height:50%;
        // background-color: rgba(0,0,0,0.1);
        // background-color: #61a93e;
        top: 5%;
        left: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;


        >.title {
            padding: 17px;
            font-size: 28px;
            font-weight: bold;
            display: flex;
            align-items: center;

            >img {
                width: 32px;
                height: 32px;
                margin-right: 15px;
            }
        }

        >.content {
            display: flex;
            flex-direction: column;
            line-height: 32px;
        }
    }

    >.sec-box {
        width: 54%;
        position: absolute;
        left: 23%;
        display: flex;
        justify-content: space-between;
        top: 65%;
        align-items: center;

        >.left-box {

            >div {
                margin: 10px 0;
            }

            >:nth-child(1) {
                font-size: 24px;
            }
        }

        >.right-box {

            font-size: 22px;
            left: 900px;

            >div {
                text-align: center;
            }
        }
    }

    >img {
        width: 100%;
    }
}
</style>